import "./header.scss"
import { NavBar, Toast } from 'antd-mobile'
import { UnorderedListOutline, TextOutline } from 'antd-mobile-icons'
import { useLocation, useNavigate } from "react-router-dom"
import { useTitle } from "../../hook"
import {  useDispatch } from 'react-redux'
import { Toggle } from "../../store/modules/counterSlice"
function Header() {
    const location = useLocation()
    const navigate = useNavigate()
    const title = useTitle()
    const dispatch = useDispatch()

    const back = () =>{
        dispatch(Toggle())
        }

    const goRecords = () => {
        navigate("/record")
    }

    const showRight = () => {
        if (location.pathname === '/record') {
            return (
                <>
                </>
            )
        }
        else if (location.pathname === '/goods') {
            return (
                <span style={{ fontSize: 18 }}>确定</span>
            )
        }
        else {
            return (
                <div style={{ fontSize: 24 }}>
                    <TextOutline onClick={() => { goRecords() }} />
                </div>
            )
        }

    }
    return (
        <NavBar backArrow={<UnorderedListOutline />} onBack={back} right={showRight()}>
            {title}                               
        </NavBar>
    )

}

export default Header